<script lang="ts" setup>
import { ref } from "vue"
import { useAudioPlayer } from "../hooks/useAudio"
import MediaSlider from "./MediaSlider.vue"
import MediaSliderSection from "./MediaSliderSection.vue"
import { onMounted } from "vue"
import { useEventListener } from "@vueuse/core"
import { onUnmounted } from "vue"
import { watch } from "vue"
const props = defineProps({
  src: {
    type: String,
    default: "",
  },
})

const {
  audioRef,
  audioSource,
  isPlaying,
  volume,
  currentMinute,
  durationMinute,
  currentSecond,
  durationSecond,
  updateSource,
  togglePlayStatus: onTogglePlayStatus,
  setPlayProgress,
  onTimeupdate,
  onLoadedmetadata,
  setSpeed: onSetSpeed,
} = useAudioPlayer({
  source: props.src,
})

watch(
  () => props.src,
  (newVal) => {
    if (!newVal) return
    updateSource(newVal)
  }
)

const speed = ref(1)
const speedOptions = [
  {
    value: 0.5,
    label: "0.5x",
  },
  {
    value: 1,
    label: "1x",
  },
  {
    value: 1.5,
    label: "1.5x",
  },
  {
    value: 2,
    label: "2x",
  },
]

const onBackwardFiveSeconds = () => {
  if (currentSecond.value - 5 > 0) {
    setPlayProgress(currentSecond.value - 5)
  } else {
    setPlayProgress(0)
  }
}
const onForwardFiveSeconds = () => {
  if (currentSecond.value + 5 <= durationSecond.value) {
    setPlayProgress(currentSecond.value + 5)
  } else {
    setPlayProgress(durationSecond.value)
  }
}

const onSetPlayProgressHandle = (val) => {
  setPlayProgress(val)
}

const cleanupEvent = useEventListener(document, "keyup", (e) => {
  if (e.key === " ") {
    onTogglePlayStatus()
  } else if (e.key === "ArrowRight") {
    onForwardFiveSeconds()
  } else if (e.key === "ArrowLeft") {
    onBackwardFiveSeconds()
  }
})

onUnmounted(cleanupEvent)
</script>

<template>
  <div>
    <div class="flex items-center justify-between pb-[20px]">
      <div class="flex items-center gap-2">
        <span
          class="inline-flex p-[4px] bg-purple-300 cursor-pointer rounded"
          @click="onTogglePlayStatus"
        >
          <el-icon color="#7540ee" v-if="isPlaying"><VideoPause /></el-icon>
          <el-icon color="#7540ee" v-else><VideoPlay /></el-icon>
        </span>

        <span
          class="inline-flex p-[4px] bg-white cursor-pointer rounded border"
          @click="onBackwardFiveSeconds"
        >
          <el-icon><RefreshLeft /></el-icon>
        </span>
        <span
          class="inline-flex p-[4px] bg-white cursor-pointer rounded border"
          @click="onForwardFiveSeconds"
        >
          <el-icon><RefreshRight /></el-icon>
        </span>
        <span class="inline-flex p-[4px] bg-white cursor-pointer rounded border">
          <el-icon><Headset /></el-icon>
        </span>

        <el-select
          v-model="speed"
          size="small"
          style="--el-select-width: 60px"
          @change="onSetSpeed"
        >
          <el-option
            v-for="item in speedOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="flex items-center">
        <span class="text-base-color">{{ currentMinute }}</span>
        <span class="mx-2"> / </span>
        <span>{{ durationMinute }}</span>
      </div>
      <div>
        <slot name="right"></slot>
      </div>
    </div>
    <MediaSlider
      :model-value="currentSecond"
      :min="0"
      :max="durationSecond"
      @change="onSetPlayProgressHandle"
    />
    <div class="h-[26px] text-xs text-[#4dda94] flex items-end">主叫号码：</div>
    <MediaSliderSection
      style="--slider-bar-color: #4dda94"
      :value="[
        [0, 30],
        [36, 40],
        [50, 60],
      ]"
      :min="0"
      :max="durationSecond"
      @change="onSetPlayProgressHandle"
    />
    <div class="h-[26px] text-xs text-base-light-1 flex items-end">被叫号码：</div>
    <MediaSliderSection
      :value="[
        [30, 36],
        [40, 50],
        [60, null],
      ]"
      :min="0"
      :max="durationSecond"
      @change="onSetPlayProgressHandle"
    />
    <div class="my-6"></div>
  </div>
  <audio
    :src="audioSource"
    ref="audioRef"
    @loadedmetadata="onLoadedmetadata"
    @timeupdate="onTimeupdate"
  ></audio>
</template>

<style lang="scss" scoped></style>
